<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="Steve Smith" />

	<title>tab</title>
    <script src="js/base.js"></script>
    
    <style type="text/css">
    
    *{
        padding:0px;
        margin:0px;
    }
    .ex{
       width:800px;
       border:1px dotted #aaa;
       padding:10px;
       margin:auto; 
    }
    li{
        list-style:none;
    
    }
    .line{
        padding:10px;
    }
    
    /*normal tab*/
    .ud_tab{
        width:600px;
        border:1px dotted #ddd;
        padding:5px;
    }
    .ud_tab_lable{
        width:100%;
        height:30px;
        border-bottom:1px solid #ddd;
    }
    .ud_tab_content_out{
        width:100%;
        
    }
    .ud_tab_content_out .active{
        display: block;
    }
    .ud_tab_content_in{
        width:100%;
        display:none;
    
    }
    .ud_tab_lable li{
        float:left;
        width:60px;
        height:29px;
        line-height: 29px;
        margin-left:5px;
        border: 1px solid #ddd;
        border-bottom:0px;
        background-color: #ccc;
        text-align:center;

    }
    .ud_tab_lable li:hover{
        background-color: #fff;
        cursor:pointer;
    }
    .ud_tab_lable .active{
        background-color: #fff;
        height:30px;
        line-height: 30px;
        
    }
    /*normal tab end*/
    
    /*closer tab*/
    .ud_tab_b{
        width:180px;
        border:1px solid #000;
        padding:0px;
    }
    .ud_tab_b_lable{
        width:100%;
        height:30px;
        border-bottom:1px solid #000;
    }
    .ud_tab_b_content_out{
        width:100%;
        
    }
    .ud_tab_b_content_out .active{
        display: block;
    }
    .ud_tab_b_content_in{
        width:100%;
        display:none;
    
    }
    .ud_tab_b_lable li{
        float:left;
        width:59px;
        height:30px;
        line-height: 30px;
        border-right: 1px solid #000;
        background-color:#ccc;
        text-align:center;

    }
    .ud_tab_b_lable .tail{
        width:60px;
        border-right:0px;
    }
    .ud_tab_b_lable li:hover{
        background-color: #fff;
    }
    .ud_tab_b_lable .active{
        background-color: #fff;
        height:31px;
        line-height: 31px;
        
    }
    /*closer tab end*/
    
    /*horical closer tab*/
    .ud_tab_hor{
        
        width:600px;
        border:1px solid #000;
        position:relative;
        
    }
    .ud_tab_hor_label{
        width:60px;
        height:100%;
        position:relative;
        
    }
    .ud_tab_hor_label li{
        width:59px;
        height:30px;
        line-height: 30px;
        text-align: center;
        border-bottom:1px solid #000;
        border-right:1px solid #000;
        background-color:#ccc
    }
    .ud_tab_hor_label li:hover{
        border-right:0px;
        background-color:#fff;
    }
    .ud_tab_hor_label .active{
         border-right:0px;
        background-color:#fff;
    }
    .ud_tab_hor_label li.tail{
         border-bottom:0px;
    }
    .ud_tab_hor_content{
        position:absolute;
        top:0px;
        left:60px;
        overflow:auto;
        padding:5px;
    }
   .ud_tab_hor_content .active{
        display:block;
    }
    .ud_tab_hor_content_in{
      display:none;
    }
    
    </style>
    <script type="text/javascript">
    
    var ud_tab_lable_id = "ud_tab_l";
    var ud_tab_l_name_pre = "ud_tab_l";
    var ud_tab_c_name_pre = "ud_tab_c";
    var ud_tab_content_out = "ud_tab_content_out";
    var ud_tab_content_in_id = "ud_tab_content_in";
    
    var ud_tab_b_lable_id = "ud_tab_b_l";
    var ud_tab_b_l_name_pre = "ud_tab_b_l";
    var ud_tab_b_c_name_pre = "ud_tab_b_c";
    var ud_tab_b_content_out = "ud_tab_b_content_out";
    var ud_tab_b_content_in_id = "ud_tab_b_content_in";
    
    var ud_tab_hor_lable_id = "ud_tab_hor_l";
    var ud_tab_hor_l_name_pre = "ud_tab_hor_l";
    var ud_tab_hor_c_name_pre = "ud_tab_hor_c";
    var ud_tab_hor_content = "ud_tab_hor_content";
    var ud_tab_hor_content_in_id = "ud_tab_hor_content_in";
    
    
    function getContentId(s,d,id){
        return d+id.replace(s,"");
    }
    
    function initNormal(){
        var o = $$().getTagName("li",ud_tab_lable_id); 
        o.click(function (){
            o.removeClass("active").setElements([this]).addClass("active");
            $$().getClass(ud_tab_content_in_id,ud_tab_content_out).removeClass("active");
            $$().setElements([$$().getIdO(getContentId(ud_tab_l_name_pre,ud_tab_c_name_pre,this.id))]).addClass("active");
        });
    }
    function initNormalB(){
        var o = $$().getTagName("li",ud_tab_b_lable_id); 
        o.hover(function(){
            o.removeClass("active").setElements([this]).addClass("active");
            $$().getClass(ud_tab_b_content_in_id,ud_tab_b_content_out).removeClass("active");
            $$().setElements([$$().getIdO(getContentId(ud_tab_b_l_name_pre,ud_tab_b_c_name_pre,this.id))]).addClass("active");
        },function(){
            
        });
        
        
        //click
        /*
        var o = $$().getTagName("li",ud_tab_b_lable_id); 
        o.click(function(){
            o.removeClass("active").setElements([this]).addClass("active");
            $$().getClass(ud_tab_b_content_in_id,ud_tab_b_content_out).removeClass("active");
            $$().setElements([$$().getIdO(getContentId(ud_tab_b_l_name_pre,ud_tab_b_c_name_pre,this.id))]).addClass("active");
        });*/
    }
    function initHor(){
        var o = $$().getTagName("li",ud_tab_hor_lable_id);
        o.hover(function(){
            o.removeClass("active");
            $$().getClass(ud_tab_hor_content_in_id,ud_tab_hor_content).removeClass("active");
            $$().setElements([$$().getIdO(getContentId(ud_tab_hor_l_name_pre,ud_tab_hor_c_name_pre,this.id))]).addClass("active")
        },function(){});
    }
    function init(){
        initNormal();
        initNormalB();
        initHor();
    }
    $$().addEvent(window,"load",init);
    
    
    </script>
</head>

<body>
<div class="ex">
    <div class="ud_tab">
        <div id="ud_tab_l" class="ud_tab_lable">
            <ul>
                <li id="ud_tab_l1" class="active">aaa</li>
                <li id="ud_tab_l2">bbb</li>
                <li id="ud_tab_l3">ccc</li>
            </ul>
        </div>
        <div id="ud_tab_content_out" class="ud_tab_content_out">
            <div id="ud_tab_c1" class="ud_tab_content_in active">aaa</div>
            <div id="ud_tab_c2" class="ud_tab_content_in">bbb</div>
            <div id="ud_tab_c3" class="ud_tab_content_in">ccc</div>
        </div>

    
    </div>
    <p class="line"></p>
    <div class="ud_tab_b">
     <div id="ud_tab_b_l" class="ud_tab_b_lable">
            <ul>
                <li id="ud_tab_b_l1" class="active">aaa</li>
                <li id="ud_tab_b_l2">bbb</li>
                <li id="ud_tab_b_l3" class="tail">ccc</li>
            </ul>
        </div>
        <div id="ud_tab_b_content_out" class="ud_tab_b_content_out">
            <div id="ud_tab_b_c1" class="ud_tab_b_content_in active">aaa</div>
            <div id="ud_tab_b_c2" class="ud_tab_b_content_in">bbb</div>
            <div id="ud_tab_b_c3" class="ud_tab_b_content_in">ccc</div>
        </div>
    </div>
    <p class="line"></p>
    <div class="ud_tab_hor">
        <div id="ud_tab_hor_l" class="ud_tab_hor_label">
            <ul>
                <li id="ud_tab_hor_l1" class="active">aaa</li>
                <li id="ud_tab_hor_l2" >bbb</li>
                <li id="ud_tab_hor_l3" class="tail">ccc</li>
            </ul>
        </div>
        <div id="ud_tab_hor_content" class="ud_tab_hor_content">
            <div id="ud_tab_hor_c1" class="ud_tab_hor_content_in active" >aaaa</div>
            <div id="ud_tab_hor_c2" class="ud_tab_hor_content_in">bbbb</div>
            <div id="ud_tab_hor_c3" class="ud_tab_hor_content_in">cccc</div>
        </div>
    </div>
    

</div>


</body>
</html>